{extend name="admin@index_layout"/}
{block name="main"}
<table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>
<script type="text/html" id="barTool">
    <a data-href='{{d.path}}' class="layui-btn layui-btn-danger layui-btn-xs btn-chooseone"><i class="iconfont icon-right"></i> 选择</a>
</script>
<script type="text/html" id="picTpl">
    {{#  if(d.mime.indexOf("image") > -1){ }}
    <img style="max-width:80px; max-height:30px;" src="{{d.path}}" data-image="{{d.name}}">
    {{#  } else { }}
    <img style="max-width:80px; max-height:30px;" src="{:url('admin/ajax/icon')}?suffix={{d.ext}}">
    {{#  } }}
</script>
{/block}
{block name="script"}
<script>
    layui.use(['yznTable','yzn','table','yznForm','yznUpload'], function() {
        var yznTable = layui.yznTable,
            yzn = layui.yzn,
            yznForm = layui.yznForm,
            yznUpload = layui.yznUpload,
            table =layui.table;
        var multiple = {$Think.get.multiple};
        var urlArr = [];

        var init = {};

        yznTable.render({
            init: init,
            id: 'dataTable',
            toolbar: ['refresh'
                , [{
                    html: '<button type="button" class="layui-btn layui-btn-sm faupload" data-multiple="false" data-type="{$mimetype}"><i class="layui-icon layui-icon-upload"></i> 上传</button>'
                }]
                {if $Think.get.multiple == "true"}
                , [{
                    html: '<a class="layui-btn layui-btn-danger layui-btn-sm btn-choose-multi"><i class="iconfont icon-right"></i> 选择</a>'
                }]
                {/if}
            ],
            elem: '#dataTable',
            url: '{:url("index")}',
            cols: [
                [
                    {if $Think.get.multiple == "true"}
                    { type: 'checkbox', fixed: 'left' },
                    {/if}
                    { field: 'id', width: 60, title: 'ID', sort: true },
                    { field: 'name', title: '名称' },
                    { field: 'path', width: 100, align: "center", title: '图片', search: false, templet: '#picTpl' },
                    { field: 'size', width: 100, title: '大小', sort: true },
                    { field: 'mime', width: 120, title: 'Mime类型' },
                    { field: 'create_time', width: 160, title: '上传时间', search: 'range' },
                    { fixed: 'right', width: 85, title: '操作', toolbar: '#barTool' }
                ]
            ],
            page: {},
            done: function(res, curr, count){
                yznUpload.api.upload('.faupload', function () {
                    $("[data-table-refresh]").trigger("click");
                });
            }
        });

        yznTable.bindevent();

        table.on('checkbox(dataTable_LayFilter)', function(obj){
            urlArr = [];
            var checkStatus = table.checkStatus('dataTable').data;
            for (var i = 0; i < checkStatus.length; i++) {
                urlArr.push(checkStatus[i]['path']);
            }
        });

        //选择单个
        $(document).on('click', '.btn-chooseone', function() {
            var that = $(this),
                index = that.parents('tr').eq(0).data('index'),
                tr = $('.layui-table-body').find('tr[data-index="' + index + '"]'),
                href = !that.attr('data-href') ? that.attr('href') : that.attr('data-href');
            yzn.close({ url: href, multiple: multiple});
        });

        // 选中多个 todo翻页失效
        $(document).on("click", ".btn-choose-multi", function () {
            yzn.close({ url: urlArr.join(","), multiple: multiple});
        });
    });
</script>
{/block}